#test-progress {
  -webkit-appearance: none;
  appearance:         none;
  height:             5px;
  width:              100%;
  position: 			   absolute;
	left: 				     50%;
	top: 				      0%;
	-webkit-transform:  translate(-50%, -50%);
	-moz-transform:     translate(-50%, -50%);
	-ms-transform:      translate(-50%, -50%);
	-o-transform:       translate(-50%, -50%);
	transform: 			  translate(-50%, -50%);
}

#timer-progress {
  -webkit-appearance: none;
  appearance:         none;
  height:             5px;
  width:              100%;
  position: 			   absolute;
	left: 				     50%;
	top: 				      5px;
	-webkit-transform:  translate(-50%, -50%);
	-moz-transform:     translate(-50%, -50%);
	-ms-transform:      translate(-50%, -50%);
	-o-transform:       translate(-50%, -50%);
	transform: 			  translate(-50%, -50%);
}

#timer-progress::-webkit-progress-bar {
  background: #C7C7CC;
}

#timer-progress::-webkit-progress-value {
  background: #ba1e3d
}

#test-progress::-webkit-progress-bar {
  background:          #C7C7CC;
}

#test-progress::-webkit-progress-value {
  background:         #007AFF;
}

.ans-btn {
  background-color: #007AFF;
  background-image:
    linear-gradient(
      167deg,
      rgba(white, 0.1) 50%,
      rgba(black, 0) 55%),
    linear-gradient(
      top,
      rgba(white, 0.15),
      rgba(black, 0));
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #C63702 inset,
    0 0 0 2px rgba(white, 0.15) inset,
    0 8px 0 0 #AD3002,
    0 8px 0 1px rgba(black, 0.4),
    0 8px 8px 1px rgba(black, 0.5);
  color: #FFF;
  display: inline-block;
  font-family: "Lucida Grande", Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  height: 61px;
  letter-spacing: -1px;
  line-height: 61px;
  margin: 30px 0 10px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 1px rgba(black, 0.5);
  text-decoration: none !important;
  top: 0;
  width: 375px;
  @include transition(0.15s);
  &:hover, &:focus {
    background-color: #D13902;
    box-shadow:
      0 0 0 1px #C63702 inset,
      0 0 0 2px rgba(white, 0.15) inset,
      0 10px 0 0 #AD3002,
      0 10px 0 1px rgba(black, 0.4),
      0 10px 8px 1px rgba(black, 0.6);
      top: -2px;
  }
  &:active {
    box-shadow:
      0 0 0 1px #AD3002 inset,
      0 0 0 2px rgba(white, 0.15) inset,
      0 0 0 1px rgba(black, 0.4);
    @include transform(translateY(10px));
  }
}

.answer-result {
  position: absolute;
  top: 35%;
  left: 45%;
  font-size: 50pt;
}

.answer-correct {
  color: #83C379;
}

.answer-incorrect {
  color: #BA1E3D;
}

.answer-question {
  color: #007AFF;
}
